<template>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>薪资：{{ person.job.salary }}</h2>
    <button @click="person.name += '!'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.salary++">修改薪资</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        监控使用 ref 定义的对象类型数据，需要开启深度监视，否则监控回调函数不生效


    </p>
</template>

<script lang="ts">
import { ref, watch } from 'vue'

export default {
    name: 'watch_reactive',
    setup() {

        // 数据（响应式）
        let person = ref({
            name: '张三',
            age: 18,
            job: {
                salary: 12
            }

        })

        // 监控（此时监控无法生效）
        // watch(
        //     person,
        //     (newValue, oldValue) => {
        //         console.log('person 发生改变', newValue, oldValue);
        //     }
        // )
        
        
        // 监控（开启深度监控后生效）
        watch(
            person,
            (newValue, oldValue) => {
                console.log('person 发生改变', newValue, oldValue);
            },
            {deep:true}
        )


        return {
            person,

        }
    }
} 
</script>
<style></style>